<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import LgAutoSize from '@/soar/components/LgAutoSize/index.vue';

const props = defineProps<{
  width?: number | string;
  visible?: boolean;
}>();
const emits = defineEmits(['update:visible', 'open', 'close']);

const _width = ref(0 as any);
const _visible = ref(props.visible);
const opacity = ref(0);
watch(
  () => props.visible,
  (v) => {
    if (v) {
      _visible.value = true;
      emits('open');
      nextTick(() => {
        _width.value = props.width;
        opacity.value = 0.31;
      });
    } else {
      _width.value = 0;
      opacity.value = 0;
      emits('close');
      setTimeout(() => {
        _visible.value = false;
      }, 300);
    }
  },
  { immediate: true },
);

function close() {
  emits('update:visible', false);
}
</script>

<template>
  <div v-if="_visible" class="lg-f-panel">
    <div class="lg-f-panel-mask" :style="{ background: `rgba(0, 0, 0, ${opacity})` }" @click="close"></div>
    <div class="lg-f-panel-wrap" :style="{ width: _width }">
      <div class="lg-f-panel-header">
        <slot name="header"></slot>
      </div>
      <lg-auto-size class="lg-f-panel-body">
        <slot></slot>
      </lg-auto-size>
      <div class="lg-f-panel-footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.lg-f-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  .lg-f-panel-wrap {
    height: 100%;
    background: white;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
  }
  .lg-f-panel-mask {
    height: 100%;
    flex: 1;
    transition: 0.3s;
  }
  .lg-f-panel-header {
    background: #409eff;
    height: 40px;
    display: flex;
    align-items: center;
  }
  .lg-f-panel-body {
    flex: 1;
  }
  .lg-f-panel-footer {
  }
}
</style>
